<template>
    <div class="footer">
        <div class="item">
            <router-link to="/home" class="nav-item" active-class="active" exact>
                <img :src="getIconSrc('home')" class="nav-icon" alt="首页" />
                <span>首页</span>
            </router-link>
        </div>
        <div class="item">
            <router-link to="/scroll" class="nav-item" active-class="active" exact>
                <img :src="getIconSrc('scroll')" class="nav-icon" alt="神券" />
                <span>神券</span>
            </router-link>
        </div>
        <div class="item item-special">
            <router-link to="/robscroll" class="nav-item-special" active-class="active-special" exact>
                <img :src="getIconSrc('robscroll')" class="nav-icon-special" alt="抢券" />
            </router-link>
        </div>
        <div class="item">
            <router-link to="/order" class="nav-item" active-class="active" exact>
                <img :src="getIconSrc('order')" class="nav-icon" alt="订单" />
                <span>订单</span>
            </router-link>
        </div>
        <div class="item">
            <router-link to="/mine" class="nav-item" active-class="active" exact>
                <img :src="getIconSrc('my')" class="nav-icon" alt="我的" />
                <span>我的</span>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        getIconSrc(iconName) {
            let routePath = this.$route.path;
            
            // 处理首页特殊情况
            if (iconName === 'home' && (routePath === '/' || routePath === '/home')) {
                return require('../assets/images/home-icon-active.png');
            }
            
            // 处理其他页面
            let pageName = iconName;
            if (iconName === 'my') {
                pageName = 'mine'; // 路径是/mine，但图标名称是my-icon
            }
            
            if (routePath === `/${pageName}`) {
                return require(`../assets/images/${iconName}-icon-active.png`);
            } else {
                return require(`../assets/images/${iconName}-icon.png`);
            }
        }
    }
}
</script>



<style lang="less" scoped>
.footer{
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 115px;
    background-color: #fff;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    z-index: 1000;
    .item{
        flex: 1;
        text-align: center;
        position: relative;
        
        .nav-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #333;
            font-size: 23px;
            text-decoration: none;
            
           
            
            .nav-icon {
                width: 45px;
                height: 45px;
                margin-bottom: 5px;
            }
        }
    }
    
    .item-special {
        display: flex;
        justify-content: center;
        
        .nav-item-special {
            position: relative;
            top: -36px;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .nav-icon-special {
                width: 120px;
                height: 120px;
            }
        }
    }
}
</style>